<template>
    <div class="charge-system">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期">
                    <el-date-picker
                        v-model="form.month"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="客户群">
                    <el-select v-model="form.custFlg">
                        <el-option label="全部" value="全部"></el-option>
                        <el-option label="政企" value="政企"></el-option>
                        <el-option label="公众" value="公众"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.isHb">
                        <el-option label="收入" value="SR"></el-option>
                        <el-option label="日环比" value="HB"></el-option>
                        <el-option label="月环比" value="TB"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 45%">
                    <!-- <el-switch v-model="form.isAfterTax"> </el-switch> -->
                    <!-- <el-checkbox size="mini"  v-model="form.isHb">是否环比</el-checkbox> -->
                    <el-button
                        size="small"
                        type="primary"
                        style="margin-left: 12px"
                        @click="search()"
                        >查询</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportExcel()"
                        >导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="export_all(!0)"
                        >二级导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="export_all(!1)"
                        >三级导出</el-button
                    >
                    
                </el-form-item>
            </el-form>
            <p class="g-unit">单位: 万元</p>
            <div class="tableBox">
                <el-table
                    border
                    stripe
                    v-loading="tableLoading"
                    :data="data"
                    style="width:100%"
                    class="tableTh28"
                    height="73vh"
                    ref="table"
                >
                    <el-table-column
                        prop="class1"
                        label="大类"
                        min-width="120"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        prop="class2"
                        label="小类"
                        min-width="120"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        prop="indexname"
                        label="科目细化"
                        min-width="140"
                        fixed
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        v-for="(it, i) in titles"
                        :key="i"
                        :prop="it.value"
                        :label="it.label + '号 (' + it.week + ')'"
                        min-width="100"
                    >
                    </el-table-column>
                    <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { getMonthDays, getWeek} from '@/utils/common'
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import prefixAPI from "@/api/prefixAPI";
const exportUrl = prefixAPI.pack;

export default {
    name: "Bill-tab2",
    data() {
        return {
            titleName: [],
            tableLoading: false,
            form: {
                areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
                month: "",
                isAfterTax: true,
                custFlg: '全部',
                isHb: 'SR',
            },
            tableData: [],
            colList: [],
            colnumName: [],
            titles: [],
            data: [],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        init() {
            var that = this;

            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;
            that.getData();
        },
        // 生成tableData数据
        createTableData(dataArr) {
            let result = dataArr.map((item, index) => {
                return { ...item, ...item.data };
            });
            return result;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                columnIndex == 0 ||
                columnIndex == 1 ||
                columnIndex == 2 ||
                columnIndex == 3
            ) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        exportExcel() {
            var areaId = this.form.areaId,
                acctMonth = this.form.month.substr(0, 6),
                custFlg = this.form.custFlg,
                isHb = this.form.isHb,
                token = getCookie("token");

            window.open(`${exportUrl}/dailyOutAccount/exportSpecial?areaId=${areaId}&acctMonth=${acctMonth}&custFlg=${custFlg}&isHb=${isHb}&token=${token}`, "_self");
        },
        // getMonth() {
        //     return new Promise(resolve => {
        //         $budgetAPI.getMaxSpecialAcctMonth(
        //             {
        //                 areaId: this.form.areaId
        //             },
        //             res => {
        //                 if (res && res.code == 0) {
        //                     resolve(res.content);
        //                 }
        //             },
        //             err => {}
        //         );
        //     });
        // },
        search() {
            var that = this;

            that.getList();
        },
        async getData() {
            var that = this;

            // that.form.month = await that.getMonth();
            let nowYear = new Date().getFullYear();
            let nowMonth = new Date().getMonth() + 1;
            that.form.month = nowMonth > 9 ? nowYear + '' + nowMonth: nowYear + '0' + nowMonth
            that.getList();
        },
        getList() {
            var that = this, 
                custFlg = that.form.custFlg,
                isHb = that.form.isHb,
                year = that.form.month.substr(0, 4),
                month = that.form.month.substr(4, 2),
                count = getMonthDays(year, month);

            that.tableLoading = true;
            let value;
            if(isHb === 'SR') value = 'real_';
            else if(isHb === 'HB') value = 'hb_';
            else if(isHb === 'TB') value = 'tb_';
            that.titles = Array.from(new Array(count), (it, i) => {
                var index = ((i+ 1) < 10 ? "0" + (i + 1) : i + 1)
                    return {
                        value:  value + index ,
                        label: (i + 1) + '',
                        week: getWeek(year + '-' + month + '-' + index)
                    };
                })
            $budgetAPI.getSpecialList2(
                {
                    areaId: that.form.areaId,
                    custFlg,
                    isHb,
                    acctMonth: that.form.month.substr(0, 6)
                },
                res => {
                    if (res && res.code == 0) {
                        let content = res.content;
                        that.tableLoading = false;
                        if (content.length) {
                            // content.dataList.map((it, i) => {
                            //     it.dataList.map((item, index) => {
                            //         it["indexValue" + index] = item.indexValue;
                            //     });
                            // });

                            // that.spanArr = mergeSpan(content.dataList, [
                            //     "class1",
                            //     "class2",
                            //     "verticalIndexName"
                            // ]);
                            that.data = content;
                        } else {
                            that.data = [];
                        }
                        that.$nextTick(() => {
                            that.$refs.table.doLayout();
                        });
                    }
                },
                err => {
                    console.log(err);
                }
            );
        },
        export_all(type) {
            var areaId = this.form.areaId,
                acctMonth = this.form.month.substr(0, 6),
                custFlg= this.form.custFlg,
                isHb= this.form.isHb,
                token = getCookie("token");

            window.open(`${exportUrl}/dailyOutAccount/exportBatchSpecial?areaId=${areaId}&acctMonth=${acctMonth}&custFlg=${custFlg}&isHb=${isHb}&isSecond=${type}&token=${token}`, "_self");
        },
        
    }
};
</script>

<style lang="scss">
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
        }
    }
}
</style>
